import React, { Component } from 'react';
import { observer, inject } from 'mobx-react';
import { withRouter,Route } from 'react-router-dom';
import { Icon, Popover, ActivityIndicator, Result, Tools } from 'weaver-mobile';
import {TabPage } from 'weaver-mobile-page';
import WorkplanListSingleStore from '../../stores/list/WorkplanListSingleStore';
import WorkplanList from '../list/WorkplanList';

const getLabel = Tools.getLabel;

// @inject('WorkplanListSingleStore')
@withRouter
@observer
export default class WorkplanListSingle extends Component {
  constructor(props) {
    super(props);
    this.state = {
      store : new WorkplanListSingleStore(),
      span: [7, 1]
    };
  }

  componentWillMount(){
    const {params,match} = this.props;
    const ps = params ? params : match.params;
    this.state.store.doNew(this,ps);
  }

  componentDidMount() {
    // this.props.contactListStore.doInit();
    this.state.store.doInit();
  }

  componentWillUnmount() {
    // this.props.contactListStore.doClear();
    this.state.store.doClear();
  }

  render() {
    // const store = this.props.contactListStore;
    const {store} = this.state;
    const {initResponsed,initSuccessed,initFailedMsg} = store;
    
    if(initResponsed){
      if(initSuccessed){
        const { listTab, listTabIndex, params} = store;
        const { span, overlay, visible } = this.state;

        let tabProps = {
          page:listTabIndex,
          swipeable:true,
          onChange: (tab) => {
            store.topTabChange(tab.key);
          }
        };
    
        const popoverProps = {
          visible,
          overlay,
          onSelect: this.handleSelect,
          onVisibleChange: this.handleVisibleChange,
        };

        const btns = [];
        btns.push(<i ref={ref => this.addBtnRef = ref} className={'crm-nav-header-icon icon-crm icon-crm-add'} style={{color:"#999"}} onClick={this.addWorkplan.bind(this)}/>);

        return (
            <div>
                <TabPage
                    btns={btns}
                    span={span}
                    tabs={listTab}
                    tabProps={tabProps}
                    popover={false}
                    popoverProps={popoverProps}
                >
                </TabPage>
                <WorkplanList params={params} onRef={this.onRef}></WorkplanList>             
            </div>
        );
      }else{
        return (
          <div>
              <Result
                img={<Icon type="cross-circle-o" className="crm_commerce_initFailedMsg" style={{ fill: '#F13642' }} />}
                title=""
                message={initFailedMsg}
              />
          </div>);
      }
    }else{
      return <div className="crm-bg-loading"><ActivityIndicator text="Loading..."/></div>;
    }
  }

  onRef = (ref) => {
    this.planListRef = ref;
  }

  addWorkplan(){
    this.planListRef.addWorkplan();
  }
}